<template>
  <!-- 人脉页面 -->
  <view class="main">
    <!-- 名片交换请求 -->
    <view class="card_request" v-if="newestNoRen">
      <view class="card_title">
        <view class="left_"> 交换名片请求 </view>
        <navigator
          url="/pages/contacts/contactsList"
          class="right_"
          hover-class="none"
        >
          <text class="hongdian" v-if="newestNum != 0"></text>
          <text
            >全部 <text v-if="newestNum != 0">{{ newestNum }}个</text>请求</text
          >
          <image
            src="../../images/aliang/remmaiyou.png"
            mode="aspectFill"
          ></image>
        </navigator>
      </view>
      <view class="card_content">
        <navigator
          :url="'/pages/index/personal?id=' + newest.senderId"
          hover-class="none"
          class="content_left"
        >
          <view class="one_">
            <image :src="newest.avatarUrl" mode="aspectFill"></image>
            <image
              src="../../imges/various.png"
              mode="aspectFill"
              class="verified"
              v-if="newest.verified"
            ></image>
          </view>

          <view class="two_">
            <view class="top_"> 好友请求：{{ newest.realName }} </view>
            <view class="bottom_">
              {{ newest.company }} <text>{{ newest.post }}</text>
              {{ newest.city }}
            </view>
          </view>
        </navigator>
        <view class="content_right content_Cao" v-if="newest.dealResult == 0">
          <image
            src="../../images/aliang/newNoPass_.png"
            mode="aspectFill"
            @tap="handleNoJhCard"
          ></image>
          <image
            src="../../images/aliang/newPass_.png"
            mode="aspectFill"
            @tap="handleJhCard"
          ></image>
        </view>
        <view class="content_right" v-if="newest.dealResult == 1">
          <image
            src="../../images/aliang/newPassG.png"
            mode="aspectFill"
          ></image>
          <text>已通过</text>
        </view>
        <view
          class="content_right content_rightX"
          v-if="newest.dealResult == 2"
        >
          <image
            src="../../images/aliang/newPassX.png"
            mode="aspectFill"
          ></image>
          <text>已拒绝</text>
        </view>
      </view>
    </view>
    <!-- 圈子人脉 -->
    <view class="renmai">
      <view class="title_"> 圈子人脉 </view>
      <view class="list_" v-if="rmList.orgContacts.length != 0">
        <navigator
          :url="'/pages/circle/index?id=' + item.id"
          class="item_"
          v-for="(item, index) in rmList.orgContacts"
          :key="index"
          hover-class="none"
        >
          <view class="left_">
            <image
              :src="item.orgUrl"
              mode="aspectFill"
              v-if="item.orgUrl"
            ></image>
            <image
              src="../../images/circle/photo.png"
              mode="aspectFill"
              v-if="!item.orgUrl"
            ></image>
          </view>
          <view class="right_">
            <view class="name_">
              <view class="quan_"> {{ item.orgName }} </view>
              <view class="num"> {{ item.peopleNumber }}人已加入 </view>
            </view>
            <view class="img"> </view>
          </view>
        </navigator>
      </view>

      <!-- 空状态显示 -->
      <view class="wu_Huo" v-if="rmList.orgContacts.length == 0">
        <image src="../../images/aliang/wu_quan.png" mode="aspectFill"></image>
        <text>暂无圈子人脉</text>
      </view>
    </view>
    <!-- 我的好友 -->
    <view class="haoyou">
      <view class="title_"> 我的好友 </view>
      <view class="list_" v-if="rmList.friendsContacts.length != 0">
        <view
          class="item_"
          v-for="(item1, index1) in rmList.friendsContacts"
          :key="index1"
        >
          <navigator
            :url="'/pages/index/personal?id=' + item1.memberId"
            class="left_"
            hover-class="none"
          >
            <image :src="item1.memberUrl" mode="aspectFill"></image>
            <!-- 大v标识 -->
            <image
              src="../../imges/various.png"
              mode="aspectFill"
              class="verified"
              v-if="item1.verified"
            ></image>
          </navigator>
          <view class="right_">
            <view class="name_">
              <view class="quan_">{{ item1.memberName }} </view>
              <view class="num">
                {{ item1.company }}&nbsp;{{ item1.post }}&nbsp;{{
                  item1.cityName
                }}
              </view>
            </view>

            <view class="imgs_">
              <image
                class="phone_"
                src="../../images/aliang/dianhua.png"
                mode="aspectFill"
                @tap="handleCall(item1.telphone, item1.isTelphone)"
              ></image>
              <navigator
                :url="'/pages/index/personal?id=' + item1.memberId"
                hover-class="none"
              >
                <image
                  src="../../images/aliang/card_.png"
                  mode="aspectFill"
                  class="card_"
                ></image>
              </navigator>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态显示 -->
      <view class="wu_Huo" v-if="rmList.friendsContacts.length == 0">
        <image src="../../images/aliang/wu_ren.png" mode="aspectFill"></image>
        <text>暂无好友</text>
      </view>

      <!-- 无手机号弹窗遮罩 -->
      <view class="zhezhao" v-if="zhezhao">
        <view class="center">
          <image
            src="../../images/aliang/cha.png"
            mode="aspectFill"
            @tap="closeZhezhao"
          ></image>
          <view class="text"
            >对方设置了联系方式隐藏，您可<br />以通过该用户的名片查看更多的
            <br />联系方式。</view
          >
          <view class="but" @tap="closeZhezhao"> 知道了 </view>
        </view>
      </view>
    </view>
    <!-- 底部tab切换 -->
    <view class="footer_tabar">
      <navigator
        class="item_tabar"
        url="/pages/index/index"
        hover-class="none"
        open-type="reLaunch"
      >
        <image src="../../static/image/quanzi.png" mode="aspectFill"></image>
        <text>圈子</text>
      </navigator>
      <view class="item_tabar">
        <image src="../../static/image/renmai1.png" mode="aspectFill"></image>
        <text class="choose">人脉</text>
        <!-- <view class="hongdian"> </view> -->
      </view>
      <navigator
        class="item_tabar"
        url="/pages/mine/mine"
        hover-class="none"
        open-type="reLaunch"
      >
        <image src="../../static/image/mine.png" mode="aspectFill"></image>
        <text>我的</text>
      </navigator>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      zhezhao: false,
      rmList: {
        orgContacts: [],
        friendsContacts: [],
      },
      newest: {}, //新好友
      newestNum: 0, //好友数
      newestNoRen: true,
    };
  },
  onLoad(options) {
    let token = uni.getStorageSync("token");
    // if(options.isShare == 1 && !token){
    // 	uni.showToast({
    // 	  title: "请授权登录再操作！",
    // 	  duration: 2000,
    // 	  icon: "none",
    // 	});
    // 	setTimeout(()=>{
    // 		uni.redirectTo({
    // 		  url: '/pages/index/index'
    // 		});
    // 	},1500)
    // }
    this.handleRmList();
    if (uni.getStorageSync("contacts") == 2) {
      // this.qiehuan2();
      setTimeout(() => {
        uni
          .createSelectorQuery()
          .select(".haoyou")
          .boundingClientRect(function (res) {
            uni.pageScrollTo({
              scrollTop: res.top,
              duration: 300,
            });
          })
          .exec();
      }, 500);
      uni.setStorageSync("contacts", 0);
    }
  },
  onShow() {
    this.newYouOne();
  },
  methods: {
    handleNoJhCard() {
      //拒绝交换名片
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/userCard/refuseExchangeCard",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: this.newest.id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.newYouOne();
            uni.showToast({
              title: "操作成功",
              duration: 2000,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleJhCard() {
      //交换名片
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/userCard/agreeExchangeCard",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: this.newest.id,
          },
        }).then((res) => {
          // console.log(res, '好友')
          if (res.data.code == 200) {
            this.newYouOne();
            uni.showToast({
              title: "操作成功",
              duration: 2000,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    newYouOne() {
      //新好友
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/social/newest",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          // console.log(res, '好友')
          if (res.data.code == 200) {
            if (res.data.data.newestList.length == 0) {
              this.newestNoRen = false;
            } else {
              this.newest = res.data.data.newestList[0];
              this.newestNum = res.data.data.unreadCount;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    closeZhezhao() {
      this.zhezhao = false;
    },
    handleCall(index, index1) {
      //点击拨打电话
      if (index1 == 1) {
        this.zhezhao = true;
        return false;
      }
      if (!index) {
        this.zhezhao = true;
        return false;
      }
      let phoneH = /^(((1[0-9][0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (!phoneH.test(index)) {
        this.zhezhao = true;
        // uni.showToast({
        // 	title: "暂无电话！",
        // 	duration: 2000,
        // 	icon: "none",
        // });
        return false;
      }
      uni.makePhoneCall({
        phoneNumber: index, //仅为示例
      });
    },
    handleRmList() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/circle/getContacts",
          method: "POST",
          data: {},
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
        }).then((res) => {
          // console.log(res, '人脉列表')
          if (res.data.code == 200) {
            this.rmList = res.data.data;
            this.rmList.friendsContacts.forEach((v) => {
              if (v.company.length > 12) {
                v.company = v.company.substring(0, 12) + "...";
              }
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.card_request {
  padding-top: 24rpx;
  border-bottom: 1rpx solid #eee;

  .card_title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left_ {
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #666666;
      // line-height: 40px;
    }

    .right_ {
      display: flex;
      font-size: 24rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      // text-align: left;
      color: #666666;
      display: flex;
      align-items: center;

      image {
        height: 20rpx;
        width: 11rpx;
        margin-left: 8rpx;
      }

      .hongdian {
        width: 16rpx;
        height: 16rpx;
        background: #db361f;
        border-radius: 50%;
        margin-right: 7rpx;
      }
    }
  }

  .card_content {
    padding-top: 32rpx;
    padding-bottom: 36rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .content_left {
      display: flex;
      align-items: center;

      .one_ {
        width: 88rpx;
        height: 88rpx;
        border-radius: 4rpx;
        // overflow: hidden;
        margin-right: 20rpx;
        position: relative;
        image {
          width: 100%;
          height: 100%;
        }
        .verified {
          position: absolute;
          width: 36rpx;
          height: 36rpx;
          bottom: -6rpx;
          right: -6rpx;
          z-index: 666;
        }
      }

      .two_ {
        height: 85rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top_ {
          max-width: 350rpx;
          font-size: 30rpx;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          // text-align: left;
          color: #111111;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .bottom_ {
          max-width: 380rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          // text-align: left;
          color: #999999;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;

          text {
            margin: 0 18rpx;
          }
        }
      }
    }

    .content_right {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #999999;
      margin-left: 20rpx;

      image {
        margin-right: 22rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }

    .content_Cao {
      image {
        width: 64rpx;
        height: 64rpx;
        background: #ffffff;
        // border: 3rpx solid #979797;
        border-radius: 50%;
        margin-left: 24rpx;
        margin-right: 0;
      }

      image:first-child {
        margin-left: 0;
      }
    }

    .content_rightX {
      image {
        margin-right: 25rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

.footer_tabar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100rpx;
  width: 750rpx;
  background: #f7f7f7;
  box-shadow: 0px 1rpx 0px 0px #dddddd inset;
  z-index: 1000;

  .item_tabar {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;

    // justify-content: space-around;
    image {
      margin-top: 8rpx;
      width: 54rpx;
      height: 54rpx;
    }

    text {
      font-size: 20rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #111;
    }

    .choose {
      color: #0f6ede;
    }

    .hongdian {
      width: 16rpx;
      height: 16rpx;
      background: #db361f;
      border-radius: 50%;
      position: absolute;
      top: 10rpx;
      right: 338rpx;
    }
  }
}

.zhezhao {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);

  .center {
    width: 540rpx;
    height: 385rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    padding: 40rpx;
    padding-top: 80rpx;
    box-sizing: border-box;

    // text-align: center;
    > image {
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      width: 23rpx;
      height: 23rpx;
    }

    .text {
      font-size: 32rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #111111;
      line-height: 45rpx;
    }

    .but {
      margin-top: 55rpx;
      width: 460rpx;
      height: 80rpx;
      background: #0f6ede;
      border-radius: 8rpx;
      line-height: 80rpx;
      text-align: center;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
    }

    .close {
      width: 38rpx;
      height: 38rpx;
      position: absolute;
      top: 30rpx;
      right: 30rpx;
    }
  }
}

.wu_Huo {
  margin-top: 200rpx;
  padding-bottom: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 210rpx;
    height: 140rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

.main {
  padding: 0 36rpx;
  padding-bottom: 100rpx;

  .renmai,
  .haoyou {
    .title_ {
      padding: 24rpx 0;
      padding-bottom: 0;
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #666666;
    }

    .list_ {
      .item_ {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_ {
          width: 88rpx;
          height: 88rpx;
          position: relative;
          image {
            width: 100%;
            height: 100%;
            border-radius: 4rpx;
          }
          .verified {
            width: 36rpx;
            height: 36rpx;
            position: absolute;
            bottom: -6rpx;
            right: -6rpx;
          }
        }

        .right_ {
          margin-left: 20rpx;
          width: calc(100vw - 180rpx);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 28rpx 0;
          border-bottom: 0.5rpx solid #ddd;

          .name_ {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 88rpx;

            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-box-orient: vertical;
            // -webkit-line-clamp: 1;
            .quan_ {
              font-size: 30rpx;
              font-family: PingFangSC, PingFangSC-Medium;
              font-weight: 500;
              text-align: left;
              color: #111111;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .num {
              font-size: 24rpx;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #999999;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
          }

          .imgs_ {
            display: flex;
            align-items: center;

            .phone_ {
              margin-right: 5rpx;
              width: 32rpx;
              height: 32rpx;
            }

            .card_ {
              margin-left: 30rpx;
              width: 38rpx;
              height: 30rpx;
            }
          }
        }
      }
    }
  }

  .renmai {
    .list_ .item_:last-child {
      border-bottom: 0.5rpx solid #ddd;

      .right_ {
        border-bottom: 0;
      }
    }
  }

  .haoyou {
    margin-top: 50rpx;

    .list_ .item_:last-child .right_ {
      border-bottom: none;
    }
  }
}
</style>
